import 'package:flutter/cupertino.dart';

import '../utils/ly_app_color.dart';
import 'ly_gradient_border_container.dart';

class LYSwitch extends StatefulWidget {
  final double width;
  final double height;

  const LYSwitch({super.key, this.width = 100, this.height = 36});

  @override
  State<LYSwitch> createState() => _LYSwitchState();
}

class _LYSwitchState extends State<LYSwitch> {
  final scrollController = ScrollController();
  bool _isOn = true;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _isOn = !_isOn;
        scrollController.animateTo(_isOn ? 100 : 0,
            duration: const Duration(milliseconds: 100), curve: Curves.easeInOut);
      },
      child: Container(
        width: widget.width,
        height: widget.height,
        child: SingleChildScrollView(
          controller: scrollController,
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              LYGradientBorderContainer(
                gradient: const LinearGradient(
                    colors: [Color(0xFFEF004C), Color(0x33EF004C)],
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight),
                borderWidth: 0.46,
                radius: const Radius.circular(18),
                child: Container(
                  height: 36,
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  decoration: BoxDecoration(
                      color: const Color(0x999D0032), borderRadius: BorderRadius.circular(18)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Text(
                        '紧急停止',
                        style: TextStyle(fontSize: 14, color: AppColor.whiteColor),
                      ),
                      const SizedBox(
                        width: 3,
                      ),
                      Container(
                        width: 20,
                        height: 20,
                        decoration: BoxDecoration(
                            color: const Color(0xFFFFDCE7),
                            borderRadius: BorderRadius.circular(10)),
                      ),
                    ],
                  ),
                ),
              ),
              LYGradientBorderContainer(
                gradient: const LinearGradient(
                    colors: [Color(0xFF00EF6C), Color(0x3300EF6C)],
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight),
                borderWidth: 0.46,
                radius: const Radius.circular(18),
                child: Container(
                  height: 36,
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  decoration: BoxDecoration(
                      color: const Color(0x99009D34), borderRadius: BorderRadius.circular(18)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        width: 20,
                        height: 20,
                        decoration: BoxDecoration(
                            color: const Color(0xFFEBFFF8),
                            borderRadius: BorderRadius.circular(10)),
                      ),
                      const SizedBox(
                        width: 3,
                      ),
                      const Text(
                        '解除急停',
                        style: TextStyle(fontSize: 14, color: AppColor.whiteColor),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
